<template>
  <div class="carChargeTime border-photo1">
    <div class="container">
        <div class="com-title">
            <span class="com-title-word">车辆充电高峰时间</span>
        </div>
      <div class="chartContainer">
        <div id="myCarChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CarChargingTime',
  data(){
    return{}
  },
  // 页面初始化时挂载DOM
  mounted(){
    this.getLoadEcharts();
  },
  methods:{
    getLoadEcharts() {
      var myChart = this.$echarts.init(
        document.getElementById("myCarChart")
      );
      var option = {
        grid: {
          top: '30%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true   // 距离包含坐标轴上的文字
        },
          xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时','13时','14时','15时','16时','17时','18时','19时','20时','21时','22时','23时'],
          axisLabel: {
            rotate: 30 ,
            textStyle:{
              color: '#ccc',
              fontSize:'12'
            },
            lineStyle:{
              color:'#2c3459',
            }
          }
        },
        yAxis: {
          type: 'value',
          data:['0','200','400','800','1000'],
          max:1000,
          axisLabel: {
            textStyle: {
              color: '#ccc',
              fontSize:'12',
            }
          },
          axisLine: {
            lineStyle:{
              color:'rgba(160,160,160,0.3)',
            }
          },
          splitLine: {
            lineStyle:{
              color:'rgba(160,160,160,0.3)',
            }
          }
        },
        series: [
          {
            data: [120, 232, 501, 434, 290, 130, 150,520, 552, 901, 934, 910, 190, 120,820, 932, 901, 934, 790, 330, 320,820, 932, 901],
            type: 'line',
            smooth: true,
            areaStyle: {
              normal: {type: 'default',
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
                  offset: 0,
                  color: '#25f3e6'
                }, {
                  offset: 1,
                  color: '#0089ff'
                }], false)
              }
            },
            symbol: 'circle', 
            symbolSize:7,
            itemStyle : {
            normal : {
              color:'#94CFCB', 
              lineStyle:{
              color:'#94CFCB',
              width:2,
            }
      }
      },
          }
        ],
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        }
      };
      myChart.setOption(option);
      window.addEventListener('resize',() => { myChart.resize(); });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

.carChargeTime{
  height: 100%;
  background-color: rgba(15,32,95,0.7);
  .container {
    // border: 1px solid rgb(32, 85, 139);
    height: 100%;
    position: relative;
    // background-color: rgb(75, 79, 96);
    // .background{
    //   .bg-1{
    //     position: absolute;
    //     left:0;
    //   }
    //   .bg-2{
    //     position: absolute;
    //     right:0;
    //   }
    //   .bg-4{
    //     position: absolute;
    //     left:0;
    //     bottom: 0;
    //   }
    //   .bg-3{
    //     position: absolute;
    //     right:0;
    //     bottom: 0;
    //   }
    // }
    .com-title{
      margin-left: 0px;
      color: rgb(255, 255, 255);
      font-weight: 600;
      font-size: 16px;
      // position: absolute;
      // left: 2%;
      // top:4%;
    }
    // h2{
    //   color: rgb(255, 255, 255);
    //   font-weight: 600;
    //   font-size: 16px;
    //   position: absolute;
    //   left: 2%;
    //   top:4%;
    // }
    .chartContainer{
      width: 100%;
      height: 100%;
    }
    #myCarChart{
      width: 100%;
      height: 100%;
    }
  }
}
.border-photo1 {
    border: 1px solid #20558B;
    // background-image:
    //     url('../../public/static/img/bj-1.png'),
    //     url('../../public/static/img/bj-2.png'),
    //     url('../../public/static/img/bj-3.png'),
    //     url('../../public/static/img/bj-4.png'), ;
    background-position: left top, right top, right bottom, left bottom;
    background-size: 2.2%, 2.2%, 2.2%, 2.2%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
</style>
